<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>传音明信片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <style type="text/css">
       *{padding: 0; margin: 0;}
        html,body{height: 100%; padding: 0; margin: 0;}
        header { color: #222; font-size: 32px; text-align:center; padding-bottom: 40px;

            margin: 0 auto;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
        }

        #section-audio_content {position: absolute;left: 0; bottom: 0;
            width: 800px;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 0 auto; max-width: 94%;
        }

        #section-audio_left, #section-audio_right {
            display: flex;
            flex-direction: column;
            padding: 40px;
        }

        #section-audio_right > * {
            margin: 10px 0;
        }

        button, a {
            margin: 10px auto;
        }

        a {
            display: block;
            width: 100px;
            text-align: center;
        }

        #canvas {
            width: 600px;
            height: 200px;
        }

        .qjbj{background: url(images/a27.png) no-repeat center center; position: relative; background-size: cover;height: 100vh; width: 100%;}
        .wznr{position: absolute;width: 1000px;left:50%; top:50%; transform:translate(-50%,-50%);max-width: 90%;}
        .bfznr{  position: relative;}
        .bfznr img{width: 100%;border-radius: 60px;-webkit-box-shadow:0 0 10px rgba(0, 0, 0, .1);  -moz-box-shadow:0 0 10px rgba(0, 0, 0, .1);  box-shadow:0 0 10px rgba(0, 0, 0, .1); }

        /*.bfly{width: 600px; position: absolute; border-radius: 20px; background: rgba(255,255,255,.4); padding: 150px 10px;text-align: center;left:50%; top:50%; transform:translate(-50%,-50%);border: 1px solid #eee;max-width: 90%;}*/
        /*.bfly aside{display: block; text-align: center; font-size: 32px; padding-bottom: 40px;font-weight: bold;}*/

        #play{width: 60px; height: 52px;  position: absolute; left: 365px; bottom: 140px;border: none;cursor: pointer;  overflow: hidden;display: block; padding: 0; margin: 0;cursor: pointer; font-size: 18px; font-weight: bold;background: none;}
        #play b{display: block; background: url(images/a2.png); width: 22px;height: 25px; margin: 0 auto 2px auto;}
        #play:hover{opacity: 0.7;}

        #pause{position: absolute;width: 60px;height: 60px; right: -20px;bottom: 180px;border-radius: 50%;cursor: pointer;margin: 0; padding: 0;border: none;background: none;text-align: center; font-weight: bold; font-size: 16px;}
        #pause:hover{opacity: .7;}
        #pause b{background: url(images/a3.png); width: 23px;height: 33px; display: block; margin: 0 auto 3px auto;}
        #record{width: 60px;height: 60px;border-radius: 50%;border: none; border: none; cursor: pointer;position: absolute;display: block;left: 180px; bottom: 175px;background: none; font-weight: bold; font-size: 16px;}
        #record:hover{opacity: .7;}
        #record b{background: url(images/a5.png); width: 40px;height: 40px;display: block; margin: 0 auto 3px auto;}
        #stop{position: absolute; right: 140px; bottom: 55px;width: 70px;height: 70px;border: none;cursor: pointer;background: none;font-size: 16px; font-weight: bold;}
        #stop:hover{opacity: .7;}
        #stop b{background: url(images/a6.png); width: 30px;height: 30px;display: block; margin: 0 auto 3px auto;}
        #stop:hover{opacity: .7;}
        #reset{position: absolute;width: 100px;height: 100px; bottom: 20px;left: 300px; border: none;cursor: pointer; background: none; font-size: 16px; font-weight: bold;}
        #reset:hover{opacity: 07;}
        #reset b{background: url(images/a7.png); width: 40px;height: 40px; display: block; margin: 0 auto 3px auto;}
        .bfznr a{display: block;}
        .spzs{width: 580px; position: absolute;left: 50%;transform: translateX(-50%);top: 20%;max-width: 60%;}
        .spzs img{border-radius: 10px; position: absolute;left: 0;top: 0;}
        .mm2{opacity: 0;}
        .mm1{opacity: 1;}
        .spzs.on .mm2{opacity: 1;}
        .spzs.on .mm1{opacity: 0;}

       @media(max-width:760px){
           #record{left: 17%;bottom: 66%;zoom: .6;}
           /*#record{left: 13%;bottom: 42%;font-size: 12px;}*/
           /*#record b{width: 20px;height: 20px;background-size: 100% 100%;}*/
           #stop{left: 53.5%;zoom: .5;bottom: 20%;}
           #play{zoom: .4;left: 38.5%; bottom: 62%;}
           #reset{zoom: .5;bottom: 0; left: 30%;}
           #pause{zoom: .6;right: 11%; bottom: 70%;}
       }
       /*.record {*/
       /*    position: absolute;*/
       /*    top:900px;*/
       /*    margin-left:60px;*/
       /*    width: 400px;*/
       /*    height:400px;*/
       /*    transform-origin: center center;*/
       /*    background-image: url('img/4.png');*/
       /*    background-size: cover;*/
       /*    background-repeat: no-repeat;*/
       /*    border-radius: 50%;*/
       /*    animation: rotate 3s linear infinite;*/
       /*}*/
       /*.bin{*/
       /*    width: 350px;*/
       /*    height: 350px;*/
       /*    position: absolute;*/
       /*    top: 1090px;*/
       /*    margin-left: 380px;*/
       /*}*/

       /*@keyframes rotate {*/
       /*    from {*/
       /*        transform: rotate(0deg);*/
       /*    }*/
       /*    to {*/
       /*        transform: rotate(360deg);*/
       /*    }*/
       /*}*/
    </style>
</head>
<body>
<!--<header>音频录制和展示</header>-->
<!--<section id="section-audio_content">-->
<!--    <section id="section-audio_left">-->
<!--        第一次扫码展示-->
<div id="app">
    <div v-show="status === 0">
        <div class="qjbj">
            <div class="wznr">
                <div class="bfqxq">
                    <header></header>
                </div>
                <div class="bfznr">
                    <div class="spzs">
                        <img src="images/tm1.gif" class="mm2"/>
                        <img src="images/yp.png" class="mm1"/>
                    </div>
                    <img src="images/a1.png"/>
                    <section id="section-audio_content">
                        <section id="section-audio_left">
                            <button id="record" ref="record" onclick="app.onRecord()"><b></b>录制</button>
                            <button id="pause" ref="pause" onclick="app.onPause()"><b></b>暂停</button>
                            <button id="stop" ref="stop" onclick="app.onStop()"><b></b>结束</button>
                            <button id="reset"><b></b></button>
                            <button id="play" onclick="app.onPlay()" ><b></b>播放</button>
                        </section>
                    </section>
                </div>
            </div>
        </div>

    </div>
    <!--        第二次扫码展示-->
    <div v-show="status === 1">
<!--        <div class="container-full">-->
<!--            <div class="" style="width: 850px;margin:0 auto">-->
<!--                <img src="img/6.png" style="width: 850px" />-->
<!--                <img src="images/b5.png" style="width: 850px" />-->
<!--                <div class="record"></div>-->
<!--                &lt;!&ndash;    <button id="pay1" style="height: 60px;width: 160px;font-size:30px;position: absolute;left:600px;top:900px">播放</button>&ndash;&gt;-->
<!--                <div class="bin"><img src="img/33.png" style="width: 300px" /></div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <audio id="audioPlayer" src="1.mp3" autoplay="true" style="display: none"></audio>-->
        <!--        <div class="qjbj">-->
<!--            <div class="bfly">-->
<!--                <section id="section-audio_right">-->
<!--                    <aside>播放录音</aside>-->
<!--                    <audio id="audio" ref="audio" controls></audio>-->
<!--                    &lt;!&ndash;<aside>音频展示：</aside>-->
<!--                   <canvas id='canvas'></canvas>&ndash;&gt;-->
<!--                </section>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</div>
<!--        <a href="javascript:void(0)" id="downPcm" download="">下载pcm</a>-->
<!--        <a href="javascript:void(0)" id="downWav" download="">下载wav</a>-->

<!--    <section id="section-audio_right">-->
<!--        <aside>播放录音：</aside>-->
<!--        <audio id="audio" ref="audio" controls></audio>-->
<!--        <aside>音频展示：</aside>-->
<!--        <canvas id='canvas'></canvas>-->
<!--    </section>-->
<!--</section>-->
<script src="js/jquery-3.1.1.js"></script>
<script src="../static/js/vue.js"></script>
<script src="../static/js/axios.min.js"></script>
<script src="../static/js/record.js"></script>
<!--<script src="../static/js/main.js"></script>-->
<script>
    const record = document.getElementById("record")
    const stop = document.getElementById("stop")
    const play = document.getElementById("play")
    const audio = document.getElementById("audio")
    // const downWav = document.getElementById("downWav")
    // const downPcm = document.getElementById("downPcm")
    // const canvas = document.getElementById("canvas")
    //const ctx = canvas.getContext("2d")
    // canvas.width = 600
    // canvas.height = 200
    let recorder = null

    //    获取地址栏参数
    let url = window.location.href;
    let id = url.split('?')[1].split('=')[1];

    /*暂停、继续功能*/
    const pause = document.getElementById("pause");  // 暂停、继续按钮
    let isPaused = false;  // 初始状态：正在录音

    let app = new Vue({
        el: '#app',
        data: {
            status: 0,
            auData: null,
        },
        beforeCreate() {
            //    获取地址栏参数
            if (id === undefined || id === '' || id === null) {
                alert('没有传入id，请重新扫码');
                return;
            }
            console.log(id);
            axios.get('/audios/' + id).then(res => {
                console.log(res.data);
                if (res.data.data === null) {
                    return;
                }
                //    0：没有录音，1：有录音,设置状态，控制不同功能的显示
                this.status = res.data.data.status;
                //    如果没有录音，直接显示录音的功能
                if (this.status === 0) {
                    console.log('没有录音');
                    //休眠2s
                    setTimeout(function () {
                        //要执行的代码
                        alert('录音时间最长为60s');
                    }, 5000);
                    return;
                }else {
                    // 编码res.data为URI组件
                    localStorage.setItem('audioData', res.data.data.audio);
                    //    重定向到第二次扫码页面
                    window.location.href = 'https://drs.mynatapp.cc/templates/video.html';
                }
                /*如果有录音，则是音频的二进制数据，需要转换成音频文件*/
                // 将二进制字符串转换为 ArrayBuffer
                this.auData = res.data.data.audio;
                let binaryString = atob(this.auData);
                let len = binaryString.length;
                let bytes = new Uint8Array(len);
                for (let i = 0; i < len; i++) {
                    bytes[i] = binaryString.charCodeAt(i);
                }
                // 创建一个 Blob 对象
                // let blob = new Blob([bytes.buffer], {type: 'audio/ogg; codecs=opus'});
                let blob = new Blob([bytes.buffer], {type: 'audio/aac'});
                // 创建一个 Object URL
                this.$refs.audio.src = window.URL.createObjectURL(blob);
            });
        },
        methods: {
            onPlay() {
                if (this.status === 0) {
                    alert('没有录音');
                    return;
                }
                //    播放录音
                console.log('onPlay');
                this.$refs.audio.play();
            },
            onRecord() {
                //    开始录音
                console.log('onRecord');
                // this.$refs.record.innerText = "重新录制";
                if (recorder !== null) recorder.close()
                Recorder.get((rec) => {
                    recorder = rec
                    recorder.start()
                })
            },
            onPause() {
                console.log('onPause');
                //    暂停录音
                if (isPaused) {
                    recorder.resume();
                    this.$refs.pause.innerText = "暂停";
                } else {
                    recorder.pause();
                    this.$refs.pause.innerText = "继续";
                }
                isPaused = !isPaused;
            },
            onStop() {
                //    结束录音
                recorder.stop()

                // 设置本地音频
                const formData = new FormData();
                formData.append('audio', recorder.getBlob());
                formData.append('uuid', id);
                // 创建一个 Blob 对象
                // let blob = new Blob([recorder.getBlob()], {type: 'audio/ogg; codecs=opus'});
                let blob = new Blob([recorder.getBlob()], {type: 'audio/aac'});
                // 创建一个 Object URL
                this.$refs.audio.src = window.URL.createObjectURL(blob);

                //    上传
                axios.post("/audios", formData).then(res => {
                    console.log(res.data);
                    //    播放录音
                    alert('录制完成，您可以点击播放或者重新录制，退出后不可再录制');
                }).catch(error => {
                    console.log(error);
                    alert('上传失败');
                });
            },
        },
    })
</script>
<script type="text/javascript">
    $('#record').click(function () {
        $('.spzs').addClass('on');
    })
    $('#play').click(function () {
        //    如果没有录音，直接返回,不播放动画
        if (app.status === 0) {
            return;
        }
        $('.spzs').addClass('on');
    })
    $('#stop').click(function () {
        $('.spzs').removeClass('on');
    })
    $('#pause').click(function () {
        $('.spzs').removeClass('on');
    })


</script>
</body>
</html>
